<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>主题详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="../js/dynamicitem.js"></script>
    <script src="../js/reachbottom.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="../js/flyzoom.js"></script>
    <style>
        .label {
            line-height: 2em;
            height: 2em;
            padding: 0 5px;
            border-radius: 5px;
        }

        .top {
            border-bottom: 1px solid #e8e8e8;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 200;
            background: #F6F6F9
        }

        .icon {
            font-size: 24px;
            line-height: 40px;
            margin: 5px 0;
            color: #07C160;
            -webkit-transition: font-size 0.5s ease-out 0s;
            -moz-transition: font-size 0.5s ease-out 0s;
            transition: font-size 0.5s ease-out 0s;
        }

        .itemimg {
            width: 100%;
        }

        .itemdiv {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 100;
        }
    </style>
</head>

<body ontouchstart>
    <div id="topicdetail" class="topicdetail">

    </div>
    <div style="height:10px ;background-color:#f5f5f5"></div>
    <div id="dynamiclist">

    </div>
    <div class="weui-loadmore" id="more0">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</body>

</html>
<script id="topicdetailtemp" type="text/html">
    <div style="position: relative;">
    <image class="itemimg" src="{{topic.BackImg||'../images/back.png'}}"></image>
    <div class="itemdiv">
        <div class="weui-media-box__title row1">#{{topic.TopicName}}.</div> 
    </div>
    </div>
    <div class="weui-media-box__desc page-bd-15">{{topic.TopicDesc}}</div>
    <div class="weui-media-box__desc page-bd-15" style="display:flex;align-items:center;justify-content: space-between">
        <div>{{topic.LookersCount}}人围观</div>
        <div>
            {{if(topic.IsConcern==1)}}
            <label class="label f-white bg-green followlabel">已关注</label>
            {{else}}
            <label class="label f-gray b-green followlabel">关注</label>
            {{/if}}
        </div>
    </div>
</script>
<script>

    lobsterh5.main({
        data: {
            dynamiclist: [],
            tabindex: 0,
            pagelist: [{
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            },],
            userId: localStorage.getItem("item"),
            topic:{}
        },
        //初始化页面
        pageload: function () {
            jQuery.noConflict();
            this.initevent();
            this.getTopicByTopicId();
            this.getTopicDynamicList();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $(window).lobsterreachbottom({
                onSuccess: function () {
                    if (self.data.tabindex == 0)
                        self.getTopicDynamicList();
                }
            });
            $("#topicdetail").on("click", ".followlabel", function () {
                var _this = $(this);
                var txt = _this.text();
                lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.FollowTopic", {
                    IsConcern: txt == "已关注" ? 0 : 1,
                    UserId:localStorage.getItem("userId"),
                    TopicId: self.data.topic.TopicId,
                }).then(res => {
                    $.toast(txt == "已关注" ? '取消成功' : '关注成功', 'text');
                    $(".dynamicitem").forEach(a => {

                        if (txt == "已关注") {
                            _this.removeClass("f-white").removeClass("bg-green").addClass("f-gray").addClass("b-green");
                            _this.text("关注");
                        }
                        else {
                            _this.addClass("f-white").addClass("bg-green").removeClass("f-gray").removeClass("b-green");
                            _this.text("已关注");
                        }
                    }) 
                }).catch(res => {
                    console.log(res.msg || res);
                    $.toast(res.msg || res, 'forbidden');
                })
            })
        },
        getTopicDynamicList() {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetTopicDynamicList", {
                page: self.data.pagelist[tabindex].page,
                limit: self.data.pagelist[tabindex].limit,
                userId: localStorage.getItem("userId"),
                topicId: lobsterh5.GetUrlParam("topicId")
            }).then(res => {
                $("#dynamiclist").lobsterdynamicitem({
                    list: res, userId: localStorage.getItem("userId"), btns: {
                        deletebtn: false,
                        reportbtn: false,
                        followbtn: true
                    },
                    showtopic:false
                })
                if (res.length < self.data.pagelist[tabindex].limit) {
                    self.data.pagelist[tabindex].hasmore = false;
                    $("#more" + tabindex).text("没有更多了");
                } else {
                    $("#more" + tabindex).hide();
                    self.data.pagelist[tabindex].page++;
                }
                self.data.pagelist[tabindex].isloading = true;
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        getTopicByTopicId() {
            var self=this;
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetTopicByTopicId", {
                topicId: lobsterh5.GetUrlParam("topicId"),
                userId:localStorage.getItem("userId")
            }).then(res => {

                var appendhtml = template("topicdetailtemp", { topic: res.topic });
                $("#topicdetail").html(appendhtml);
                self.data.topic=res.topic;
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        }
    }); 
</script>